<template>
    <div class="searchValue width980">
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>{{ citylocation }}美团</el-breadcrumb-item>
            <el-breadcrumb-item>{{ searchQuery }}</el-breadcrumb-item>
        </el-breadcrumb>
        <el-row class="search-content">
            <el-col :span="18" class="content-left">
                <el-row class="categories">
                    <el-row class="_categories">
                        <span>分类</span>
                        <dl>
                            <dt class="categories-all">全部</dt>
                            <dd>
                                <el-dropdown trigger="click" v-for="(item, index) in dropdownData" :key="index">
                                    <span class="el-dropdown-link"> {{ item.title }}<i class="el-icon-arrow-down el-icon--right"></i> </span>
                                    <el-dropdown-menu slot="dropdown">
                                        <el-dropdown-item v-for="list in item.subList" :key="list.id">{{ list.name }}</el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                            </dd>
                        </dl>
                    </el-row>

                    <el-row class="region">
                        <span>区域</span>
                        <dl>
                            <dt class="categories-all">全部</dt>
                            <dd>
                                <el-dropdown trigger="click" v-for="(item, index) in dropdownRegionData" :key="index">
                                    <span class="el-dropdown-link"> {{ item.title }}<i class="el-icon-arrow-down el-icon--right"></i> </span>
                                    <el-dropdown-menu slot="dropdown">
                                        <el-dropdown-item v-for="list in item.subList" :key="list.id">{{ list.name }}</el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                            </dd>
                        </dl>
                    </el-row>
                </el-row>
                <el-row class="goods-list">
                    <ul>
                        <li v-for="goods in goodsList" :key="goods.id">
                            <el-col :span="12" class="goods-img">
                                <img class="goods-img" :src="goods.image" alt="" />
                                <img src="" class="small-mark" alt="" />
                            </el-col>

                            <el-col :span="12" class="goods-right">
                                <el-row class="goods-top">
                                    <h3>
                                        <a href="javascript:;">{{ goods.title }}</a>
                                    </h3>
                                    <el-row type="flex">
                                        <el-rate v-model="goods.score" disabled :show-text="true" text-color="#ff9900" :texts="['很差', '差', '一般', '好', '很好']" score-template="{value}" disabled-volid-color="#111"> </el-rate>
                                        <span class="show-score">{{ goods.score }} 分</span>
                                        <span class="comment">{{ goods.commentNum }}人评论</span>
                                    </el-row>
                                    <p class="address" :title="goods.address">{{ goods.address }}</p>
                                    <p class="price">人均 ¥{{ goods.avgPrice }}</p>
                                </el-row>
                                <ul class="goods-bottom">
                                    <li class="setMeal" v-for="(item, index) in goods.dealItems" :key="index">
                                        <div v-if="index < 1 || goods.isShow">
                                            <p class="goods-setMeal-title">
                                                <a href="javascript:;">{{ item.title }}</a>
                                            </p>
                                            <p class="price">
                                                <span class="newPrice">¥ {{ item.price }}</span
                                                ><span class="oldPrice">¥ {{ item.counterPrice }}</span>
                                            </p>
                                        </div>
                                    </li>
                                    <div class="control" v-if="goods.dealItems.length > 1">
                                        <p v-if="!goods.isShow" @click="spread(goods)">更多 {{ goods.dealItems.length - 1 }}个优惠 <i class="el-icon-arrow-down"></i></p>
                                        <p v-else @click="packUp(goods)">收起 <i class="el-icon-arrow-up"></i></p>
                                    </div>
                                </ul>
                            </el-col>
                        </li>
                    </ul>
                </el-row>
            </el-col>
            <el-col :span="6" class="content-right" ref="colRef">
                <div class="map">地图</div>
                <div class="guessYouLike">
                    <h3>推荐商品</h3>
                    <div class="guess-item" v-for="(item, index) in 10" :key="index">{{index}}</div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
    data() {
        return {
            searchQuery: '',
            dropdownData: [],
            dropdownRegionData:[],
            goodsList: [],
            isShowSurplus: false, //是否展开剩余
        }
    },
    computed: {
        ...mapState(['citylocation']),
    },
    watch: {
        $route(to, from) {
            if (to.query != from.query) {
                this.searchQuery = to.query.s
                // 触发搜索data函数
                console.log(to.query)
            }
        },
    },
    mounted() {
        this.searchQuery = this.$route.query.s
        this.getData()
    },
    methods: {
         getData(){
            this.$axios.all([
                this.$axios.get('/api/meituan/list/classify.json'),
                this.$axios.get('/api/meituan/list/goodsList.json')
                ]).then(this.$axios.spread((dropdownData,goodsList)=>{
                    this.dropdownData=dropdownData.data
                    goodsList.data.forEach(item=>{
                        item.isShow=false                        
                    })
                    this.goodsList=goodsList.data
                    console.log(dropdownData,goodsList);
                }))
        },
        // async getCategoriesData() {
        //     const res = await this.$store.dispatch('getRequest', { path: '/api/meituan/list/classify.json' })
        //     const region=await this.$store.dispatch('getRequest',{path:"/api/meituan/list/areaList.json"})
        //     this.dropdownData = res
        //     this.dropdownRegionData=region

        //     console.log(res,region)
        // },
        // async getGoodsListData() {
        //     const res = await this.$store.dispatch('getRequest', { path: '/api/meituan/list/goodsList.json' })
        //     res.forEach(item => {
        //         item.isShow = false
        //     })
        //     this.goodsList = res
        //     console.log(res)
        // },

        spread(item) {
            //展开
            item.isShow = true
        },
        packUp(item) {
            //收起
            item.isShow = false
        },
    },
}
</script>

<style lang="less" scoped>
@import '../util/public.less';
div.searchValue {
    .el-breadcrumb {
        height: 40px;
        line-height: 40px;
    }
    .el-row.search-content {
        border: 1px solid #eee;
        padding: 15px;
        border-radius: 5px;
        .el-col.content-left {
            height: 1000px;
            .el-row.categories {
                .el-row._categories,.el-row.region {
                    padding: 20px;
                    display: flex;
                    & > span {
                        display: inline-block;
                        width: 100px;
                        flex-shrink: 0;
                    }
                    dl {
                        display: flex;
                        margin: 0;
                        dt.categories-all {
                            background: @mt-bg;
                            padding: 0 10px;
                            border-radius: 12px;
                        }
                        dd {
                            .el-dropdown {
                                cursor: pointer;
                                margin-right: 40px;
                            }
                        }
                    }
                }
                
            }
            .el-row.goods-list {
                & > ul > li {
                    display: flex;
                    margin: 20px 0;
                    .el-col.goods-img {
                        height: 125px;
                        width: 220px;
                        img.goods-img {
                            height: 125px;
                            width: 220px;
                            border-radius: 5px;
                        }
                    }
                    .el-col.goods-right {
                        margin-left: 10px;
                        .el-row.goods-top {
                            margin-left: 10px;
                            border-bottom: 1px dotted #ccc;
                            padding-bottom: 20px;
                            h3 {
                                font-weight: 500;
                                margin: 0;
                            }
                            p {
                                margin: 5px 0 0 0;
                                &.address,
                                &.price {
                                    color: @mt-666;
                                    font-size: 12px;
                                    width: 280px;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    white-space: nowrap;
                                }
                            }
                            .el-row {
                                margin-top: 5px;
                                span {
                                    margin-left: 20px;
                                    font-size: 12px;
                                    &.comment {
                                        color: @mt-color;
                                    }
                                }
                            }
                        }
                        ul.goods-bottom {
                            li.setMeal {
                                padding-left: 10px;
                                &:hover {
                                    background: #f5f5f5;
                                    border-radius: 5px;
                                }
                                p {
                                    margin: 5px 0;
                                }
                                p.goods-setMeal-title {
                                    padding-top: 20px;
                                    a:hover {
                                        color: @mt-color !important;
                                    }
                                }
                                p.price {
                                    span.newPrice {
                                        color: @mt-color;
                                    }
                                    span.oldPrice {
                                        margin-left: 20px;
                                        color: @mt-888;
                                        font-size: 12px;
                                    }
                                }
                            }
                            div.control {
                                padding-left: 10px;
                                cursor: pointer;
                            }
                        }
                    }
                }
            }
        }
        // 地图map
        .el-col.content-right {
            top: 0;
            height: 3000px;
            // position: sticky;
            div.map {
                position: sticky;
                height: 230px;
                width: 230px;
                top: 0;
                border: 1px solid red;
                z-index: 111;
                background: #fff;
            }
            div.guessYouLike {
                position: relative;
                margin-top: 30px;
                div.guess-item {
                    height: 200px;
                    width: 200px;
                    background: skyblue;
                    margin-bottom: 20px;
                }
            }
        }
    }
}
</style>
